<template>
  <div v-perms="['Role.list']">
    <div>
      <el-form :model="searchData" inline>
        <el-form-item label="名称">
          <el-input v-model="searchData.name" placeholder="请输入名称"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-loading="result.loading">
      <div v-perms="['Role.add']">
        <el-button type="primary" @click="handleAdd">
          <template #icon>
            <el-icon>
              <Plus/>
            </el-icon>
          </template>
        </el-button>
      </div>

      <div class="mt-2">
        <el-table :data="result.list">
          <el-table-column prop="id" label="ID" width="85" align="center"/>
          <el-table-column prop="name" label="名称" min-width="150" align="center"/>
          <el-table-column prop="meno" label="备注" min-width="150" align="center"/>
          <el-table-column prop="create_time" label="创建时间" min-width="170" align="center"/>
          <el-table-column prop="update_time" label="修改时间" min-width="170" align="center"/>

          <el-table-column label="操作" min-width="150" align="center">
            <template #default="{ row }">
              <el-button type="warning" link @click="handleMenu(row)" v-perms="['RoleMenu.list', 'RoleMenu.add']">
                分配权限
              </el-button>
              <el-button type="primary" link @click="handleEdit(row)" v-perms="['Role.edit']">
                编辑
              </el-button>
              <el-button type="danger" link @click="handleDelete(row.id)" v-perms="['Role.del']">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="flex justify-end mt-2">
        <Pagination :paging="paging"/>
      </div>
    </div>

    <edit-popup v-if="visible" v-model:visible="visible" ref="editRef" @success="handleSuccess"></edit-popup>
    <menu-popup v-if="menuVisible" v-model:visible="menuVisible" ref="menuRef" @success="handleSuccess"></menu-popup>
  </div>
</template>

<script setup>

import {Plus} from "@element-plus/icons-vue";
import Pagination from '@/components/pagination/index.vue'
import {useList} from "@/hooks/useList";
import {list, edit, del} from '@/api/role'
import {nextTick, onMounted, reactive, ref, shallowRef} from "vue";
import editPopup from './edit.vue'
import menuPopup from './menu.vue'
import feedback from '@/utils/feedback'


const editRef = shallowRef(editPopup)
const menuRef = shallowRef(menuPopup)
const visible = ref(false)
const menuVisible = ref(false)
const searchData = reactive({
  name: '',
})

const {paging, result, getList, search, resetSearch} = useList({
  apiFun: list,
  params: searchData
})

const handleAdd = async () => {
  visible.value = true
  await nextTick()
  await editRef.value?.setFormData()
}

const handleEdit = async (row) => {
  visible.value = true
  await nextTick()
  await editRef.value?.setFormData(row, 'edit')
}

const handleMenu = async (row) => {
  menuVisible.value = true
  await nextTick()
  await menuRef.value?.setFormData(row)
}

const handleDelete = async (id) => {
  await feedback.confirm('确认删除?')
  await del({ids: id})
  feedback.optionSuccess()
  getList()
}

const handleSuccess = async () => {
  visible.value = false
  menuVisible.value = false
  getList()
  feedback.optionSuccess()
}

onMounted(() => getList())

</script>

<style scoped>

</style>